{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AliCRM | 登录</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/font-awesome/css/font-awesome.min.css' %}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/Ionicons/css/ionicons.min.css' %}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'adminlte/dist/css/AdminLTE.min.css' %}">
    <!-- iCheck -->
    <link rel="stylesheet" href="{% static 'adminlte/plugins/iCheck/square/blue.css' %}">


</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href=""><b>Ali</b>CRM</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg">请登录</p>

        <form action="" method="post">
            {% csrf_token %}
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="username" name="username">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                <span class="username-error" style="color:#b14442"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="Password" name="password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                <span class="password-error" style="color:#b14442"></span>
            </div>
            <div class="row">
                <div class="col-sm-7">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" placeholder="验证码" name="authcode">
                        <span class="glyphicon glyphicon-barcode form-control-feedback"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <img id="authImg" src="{% url 'get_auth_img' %}" alt="验证码">
                </div>

            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox"> 是否记住帐号
                        </label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="button" id="loginBtn" class="btn btn-primary btn-block btn-flat">登录</button>
                </div>
                <!-- /.col -->
            </div>
        </form>

        <div class="social-auth-links text-center">
            <p>- OR -</p>
            <a href="#" class="btn btn-block btn-social btn-facebook btn-flat">
                <i class="fa fa-facebook"></i>使用微信登录
            </a>
        </div>
        <!-- /.social-auth-links -->

        <a href="#">忘记密码</a><br>
        <a href="{% url 'register' %}" class="text-center">注册一个新账号!</a>

    </div>
    <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->
<script src="{% static 'adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- iCheck -->
<script src="{% static 'adminlte/plugins/iCheck/icheck.min.js' %}"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' /* optional */
        });
    });

    // 登录ajax请求
    $("#loginBtn").on("click", function () {
        var username = $("input[name=username]").val();
        var password = $("input[name=password]").val();
        var authcode = $("input[name=authcode]").val();
        var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
        if (!username) {
            $(".username-error").text("帐号不能为空！")
        }
        if (!password) {
            $(".password-error").text("密码不能为空！")
        }
        if (!authcode) {
            $(".authcode-error").text("请输入验证码")
        }
        $.ajax({
            url: "{% url 'login' %}",
            type: 'post',
            data: {
                username: username,
                password: password,
                authcode: authcode,
                csrfmiddlewaretoken: csrf_token,
            },
            contentType:"application/x-www-form-urlencoded",
            success: function (res) {
                if (res.status === "1") {
                    $(".authcode-error").text("验证码错误！")
                }
                if (res.status === "2") {
                    var href = location.search.slice(6);  //使用了auth的装饰器，会记录未登录用户想要访问的登录页面，登录成功后，会自动跳转过去
                    if (href) {
                        location.href = href  //登录成功，有目标地址
                    } else {
                        location.href = "{% url 'index' %}"  // 登录成功没有目标地址，跳转主页
                    }
                }
                if (res.status === "3") {  // 帐号密码错误
                    $(".username-error").text("账号或密码错误！")
                }
            }
        })
    });

    // 验证码刷新
    $("#authImg").on("click", function () {
        $("#authImg")[0].src += "?" // 点击事件刷新验证码图片
    })
</script>
</body>
</html>